---
image: /generated/articles-docs-font-picker.png
id: font-picker
title: Build a Google Font picker
crumb: 'Building video apps'
---

To show various Google fonts in a font picker and load them once the user selects them, first install `@remotion/google-fonts` (at least v3.3.64).

This feature is only available if `@remotion/google-fonts` is imported as an ES Module.  
If it is imported as a CommonJS module instead, loading a font will throw an error.

Call [`getAvailableFonts()`](/docs/google-fonts/get-available-fonts) to get a list of Google Fonts and call `.load()` to load the metadata of a font.  
Afterwards, on the object you retrieve:

- You can call `getInfo()` to retrieve available styles and weights.
- You can call `loadFont()` to load the font itself.

Use the `fontFamily` CSS property to apply a font.

Remember that if you want to render a video with said font, you also need to load the font inside the Remotion video. You can do it in the same way, by looping through the available fonts, finding the font you want to load and then load it.

## Show all fonts in a font picker

The following snippet renders a dropdown with all Google Fonts, and loads one it it has been selected. The list is approximately 1400 fonts.

```tsx twoslash
import {getAvailableFonts} from '@remotion/google-fonts';
import React, {useCallback} from 'react';

export const FontPicker: React.FC = () => {
  const newFonts = getAvailableFonts();

  const onChange = useCallback(
    async (e: React.ChangeEvent<HTMLSelectElement>) => {
      const fonts = newFonts[e.target.selectedIndex];

      // Load font information
      const loaded = await fonts.load();

      // Load the font itself
      const {fontFamily, ...otherInfo} = loaded.loadFont();

      // Or get metadata about the font
      const info = loaded.getInfo();
      const styles = Object.keys(info.fonts);
      console.log('Font', info.fontFamily, ' Styles', styles);
      for (const style of styles) {
        const weightObject = info.fonts[style as keyof typeof info.fonts];
        const weights = Object.keys(weightObject);
        console.log('- Style', style, 'supports weights', weights);
        for (const weight of weights) {
          const scripts = Object.keys(weightObject[weight]);
          console.log('-- Weight', weight, 'supports scripts', scripts);
        }
      }
    },
    [newFonts],
  );

  return (
    <div>
      <select onChange={onChange}>
        {newFonts.map((f) => {
          return (
            <option key={f.importName} value={f.importName}>
              {f.fontFamily}
            </option>
          );
        })}
      </select>
    </div>
  );
};
```

## Show only the 250 most popular Google Fonts

To reduce bundle size, you can limit the selection. Instead of calling `getAvailableFonts()`, create a file with the following contents and use it as the fonts array:

```ts twoslash
import type {GoogleFont} from '@remotion/google-fonts';

export const top250 = [
  {
    family: 'ABeeZee',
    load: () => import('@remotion/google-fonts/ABeeZee') as Promise<GoogleFont>,
  },
  {
    family: 'Abel',
    load: () => import('@remotion/google-fonts/Abel') as Promise<GoogleFont>,
  },
  {
    family: 'Abril Fatface',
    load: () => import('@remotion/google-fonts/AbrilFatface') as Promise<GoogleFont>,
  },
  {
    family: 'Acme',
    load: () => import('@remotion/google-fonts/Acme') as Promise<GoogleFont>,
  },
  {
    family: 'Alata',
    load: () => import('@remotion/google-fonts/Alata') as Promise<GoogleFont>,
  },
  {
    family: 'Albert Sans',
    load: () => import('@remotion/google-fonts/AlbertSans') as Promise<GoogleFont>,
  },
  {
    family: 'Alegreya',
    load: () => import('@remotion/google-fonts/Alegreya') as Promise<GoogleFont>,
  },
  {
    family: 'Alegreya Sans',
    load: () => import('@remotion/google-fonts/AlegreyaSans') as Promise<GoogleFont>,
  },
  {
    family: 'Alegreya Sans SC',
    load: () => import('@remotion/google-fonts/AlegreyaSansSC') as Promise<GoogleFont>,
  },
  {
    family: 'Alfa Slab One',
    load: () => import('@remotion/google-fonts/AlfaSlabOne') as Promise<GoogleFont>,
  },
  {
    family: 'Alice',
    load: () => import('@remotion/google-fonts/Alice') as Promise<GoogleFont>,
  },
  {
    family: 'Almarai',
    load: () => import('@remotion/google-fonts/Almarai') as Promise<GoogleFont>,
  },
  {
    family: 'Amatic SC',
    load: () => import('@remotion/google-fonts/AmaticSC') as Promise<GoogleFont>,
  },
  {
    family: 'Amiri',
    load: () => import('@remotion/google-fonts/Amiri') as Promise<GoogleFont>,
  },
  {
    family: 'Antic Slab',
    load: () => import('@remotion/google-fonts/AnticSlab') as Promise<GoogleFont>,
  },
  {
    family: 'Anton',
    load: () => import('@remotion/google-fonts/Anton') as Promise<GoogleFont>,
  },
  {
    family: 'Architects Daughter',
    load: () => import('@remotion/google-fonts/ArchitectsDaughter') as Promise<GoogleFont>,
  },
  {
    family: 'Archivo',
    load: () => import('@remotion/google-fonts/Archivo') as Promise<GoogleFont>,
  },
  {
    family: 'Archivo Black',
    load: () => import('@remotion/google-fonts/ArchivoBlack') as Promise<GoogleFont>,
  },
  {
    family: 'Archivo Narrow',
    load: () => import('@remotion/google-fonts/ArchivoNarrow') as Promise<GoogleFont>,
  },
  {
    family: 'Arimo',
    load: () => import('@remotion/google-fonts/Arimo') as Promise<GoogleFont>,
  },
  {
    family: 'Arsenal',
    load: () => import('@remotion/google-fonts/Arsenal') as Promise<GoogleFont>,
  },
  {
    family: 'Arvo',
    load: () => import('@remotion/google-fonts/Arvo') as Promise<GoogleFont>,
  },
  {
    family: 'Asap',
    load: () => import('@remotion/google-fonts/Asap') as Promise<GoogleFont>,
  },
  {
    family: 'Asap Condensed',
    load: () => import('@remotion/google-fonts/AsapCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Assistant',
    load: () => import('@remotion/google-fonts/Assistant') as Promise<GoogleFont>,
  },
  {
    family: 'Barlow',
    load: () => import('@remotion/google-fonts/Barlow') as Promise<GoogleFont>,
  },
  {
    family: 'Barlow Condensed',
    load: () => import('@remotion/google-fonts/BarlowCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Barlow Semi Condensed',
    load: () => import('@remotion/google-fonts/BarlowSemiCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Be Vietnam Pro',
    load: () => import('@remotion/google-fonts/BeVietnamPro') as Promise<GoogleFont>,
  },
  {
    family: 'Bebas Neue',
    load: () => import('@remotion/google-fonts/BebasNeue') as Promise<GoogleFont>,
  },
  {
    family: 'Bitter',
    load: () => import('@remotion/google-fonts/Bitter') as Promise<GoogleFont>,
  },
  {
    family: 'Black Ops One',
    load: () => import('@remotion/google-fonts/BlackOpsOne') as Promise<GoogleFont>,
  },
  {
    family: 'Bodoni Moda',
    load: () => import('@remotion/google-fonts/BodoniModa') as Promise<GoogleFont>,
  },
  {
    family: 'Bree Serif',
    load: () => import('@remotion/google-fonts/BreeSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Bungee',
    load: () => import('@remotion/google-fonts/Bungee') as Promise<GoogleFont>,
  },
  {
    family: 'Cabin',
    load: () => import('@remotion/google-fonts/Cabin') as Promise<GoogleFont>,
  },
  {
    family: 'Cairo',
    load: () => import('@remotion/google-fonts/Cairo') as Promise<GoogleFont>,
  },
  {
    family: 'Cantarell',
    load: () => import('@remotion/google-fonts/Cantarell') as Promise<GoogleFont>,
  },
  {
    family: 'Cardo',
    load: () => import('@remotion/google-fonts/Cardo') as Promise<GoogleFont>,
  },
  {
    family: 'Catamaran',
    load: () => import('@remotion/google-fonts/Catamaran') as Promise<GoogleFont>,
  },
  {
    family: 'Caveat',
    load: () => import('@remotion/google-fonts/Caveat') as Promise<GoogleFont>,
  },
  {
    family: 'Chakra Petch',
    load: () => import('@remotion/google-fonts/ChakraPetch') as Promise<GoogleFont>,
  },
  {
    family: 'Changa',
    load: () => import('@remotion/google-fonts/Changa') as Promise<GoogleFont>,
  },
  {
    family: 'Chivo',
    load: () => import('@remotion/google-fonts/Chivo') as Promise<GoogleFont>,
  },
  {
    family: 'Cinzel',
    load: () => import('@remotion/google-fonts/Cinzel') as Promise<GoogleFont>,
  },
  {
    family: 'Comfortaa',
    load: () => import('@remotion/google-fonts/Comfortaa') as Promise<GoogleFont>,
  },
  {
    family: 'Commissioner',
    load: () => import('@remotion/google-fonts/Commissioner') as Promise<GoogleFont>,
  },
  {
    family: 'Concert One',
    load: () => import('@remotion/google-fonts/ConcertOne') as Promise<GoogleFont>,
  },
  {
    family: 'Cookie',
    load: () => import('@remotion/google-fonts/Cookie') as Promise<GoogleFont>,
  },
  {
    family: 'Cormorant',
    load: () => import('@remotion/google-fonts/Cormorant') as Promise<GoogleFont>,
  },
  {
    family: 'Cormorant Garamond',
    load: () => import('@remotion/google-fonts/CormorantGaramond') as Promise<GoogleFont>,
  },
  {
    family: 'Courgette',
    load: () => import('@remotion/google-fonts/Courgette') as Promise<GoogleFont>,
  },
  {
    family: 'Crete Round',
    load: () => import('@remotion/google-fonts/CreteRound') as Promise<GoogleFont>,
  },
  {
    family: 'Crimson Pro',
    load: () => import('@remotion/google-fonts/CrimsonPro') as Promise<GoogleFont>,
  },
  {
    family: 'Crimson Text',
    load: () => import('@remotion/google-fonts/CrimsonText') as Promise<GoogleFont>,
  },
  {
    family: 'Cuprum',
    load: () => import('@remotion/google-fonts/Cuprum') as Promise<GoogleFont>,
  },
  {
    family: 'DM Sans',
    load: () => import('@remotion/google-fonts/DMSans') as Promise<GoogleFont>,
  },
  {
    family: 'DM Serif Display',
    load: () => import('@remotion/google-fonts/DMSerifDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'DM Serif Text',
    load: () => import('@remotion/google-fonts/DMSerifText') as Promise<GoogleFont>,
  },
  {
    family: 'Dancing Script',
    load: () => import('@remotion/google-fonts/DancingScript') as Promise<GoogleFont>,
  },
  {
    family: 'Didact Gothic',
    load: () => import('@remotion/google-fonts/DidactGothic') as Promise<GoogleFont>,
  },
  {
    family: 'Domine',
    load: () => import('@remotion/google-fonts/Domine') as Promise<GoogleFont>,
  },
  {
    family: 'Dosis',
    load: () => import('@remotion/google-fonts/Dosis') as Promise<GoogleFont>,
  },
  {
    family: 'EB Garamond',
    load: () => import('@remotion/google-fonts/EBGaramond') as Promise<GoogleFont>,
  },
  {
    family: 'Eczar',
    load: () => import('@remotion/google-fonts/Eczar') as Promise<GoogleFont>,
  },
  {
    family: 'El Messiri',
    load: () => import('@remotion/google-fonts/ElMessiri') as Promise<GoogleFont>,
  },
  {
    family: 'Electrolize',
    load: () => import('@remotion/google-fonts/Electrolize') as Promise<GoogleFont>,
  },
  {
    family: 'Encode Sans',
    load: () => import('@remotion/google-fonts/EncodeSans') as Promise<GoogleFont>,
  },
  {
    family: 'Encode Sans Condensed',
    load: () => import('@remotion/google-fonts/EncodeSansCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Exo',
    load: () => import('@remotion/google-fonts/Exo') as Promise<GoogleFont>,
  },
  {
    family: 'Exo 2',
    load: () => import('@remotion/google-fonts/Exo2') as Promise<GoogleFont>,
  },
  {
    family: 'Figtree',
    load: () => import('@remotion/google-fonts/Figtree') as Promise<GoogleFont>,
  },
  {
    family: 'Fira Sans',
    load: () => import('@remotion/google-fonts/FiraSans') as Promise<GoogleFont>,
  },
  {
    family: 'Fira Sans Condensed',
    load: () => import('@remotion/google-fonts/FiraSansCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Fjalla One',
    load: () => import('@remotion/google-fonts/FjallaOne') as Promise<GoogleFont>,
  },
  {
    family: 'Francois One',
    load: () => import('@remotion/google-fonts/FrancoisOne') as Promise<GoogleFont>,
  },
  {
    family: 'Frank Ruhl Libre',
    load: () => import('@remotion/google-fonts/FrankRuhlLibre') as Promise<GoogleFont>,
  },
  {
    family: 'Fraunces',
    load: () => import('@remotion/google-fonts/Fraunces') as Promise<GoogleFont>,
  },
  {
    family: 'Gelasio',
    load: () => import('@remotion/google-fonts/Gelasio') as Promise<GoogleFont>,
  },
  {
    family: 'Gloria Hallelujah',
    load: () => import('@remotion/google-fonts/GloriaHallelujah') as Promise<GoogleFont>,
  },
  {
    family: 'Gothic A1',
    load: () => import('@remotion/google-fonts/GothicA1') as Promise<GoogleFont>,
  },
  {
    family: 'Great Vibes',
    load: () => import('@remotion/google-fonts/GreatVibes') as Promise<GoogleFont>,
  },
  {
    family: 'Gruppo',
    load: () => import('@remotion/google-fonts/Gruppo') as Promise<GoogleFont>,
  },
  {
    family: 'Heebo',
    load: () => import('@remotion/google-fonts/Heebo') as Promise<GoogleFont>,
  },
  {
    family: 'Hind',
    load: () => import('@remotion/google-fonts/Hind') as Promise<GoogleFont>,
  },
  {
    family: 'Hind Madurai',
    load: () => import('@remotion/google-fonts/HindMadurai') as Promise<GoogleFont>,
  },
  {
    family: 'Hind Siliguri',
    load: () => import('@remotion/google-fonts/HindSiliguri') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Mono',
    load: () => import('@remotion/google-fonts/IBMPlexMono') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Sans',
    load: () => import('@remotion/google-fonts/IBMPlexSans') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Sans Arabic',
    load: () => import('@remotion/google-fonts/IBMPlexSansArabic') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Sans Condensed',
    load: () => import('@remotion/google-fonts/IBMPlexSansCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Serif',
    load: () => import('@remotion/google-fonts/IBMPlexSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Inconsolata',
    load: () => import('@remotion/google-fonts/Inconsolata') as Promise<GoogleFont>,
  },
  {
    family: 'Indie Flower',
    load: () => import('@remotion/google-fonts/IndieFlower') as Promise<GoogleFont>,
  },
  {
    family: 'Inter',
    load: () => import('@remotion/google-fonts/Inter') as Promise<GoogleFont>,
  },
  {
    family: 'Inter Tight',
    load: () => import('@remotion/google-fonts/InterTight') as Promise<GoogleFont>,
  },
  {
    family: 'Josefin Sans',
    load: () => import('@remotion/google-fonts/JosefinSans') as Promise<GoogleFont>,
  },
  {
    family: 'Josefin Slab',
    load: () => import('@remotion/google-fonts/JosefinSlab') as Promise<GoogleFont>,
  },
  {
    family: 'Jost',
    load: () => import('@remotion/google-fonts/Jost') as Promise<GoogleFont>,
  },
  {
    family: 'Kalam',
    load: () => import('@remotion/google-fonts/Kalam') as Promise<GoogleFont>,
  },
  {
    family: 'Kanit',
    load: () => import('@remotion/google-fonts/Kanit') as Promise<GoogleFont>,
  },
  {
    family: 'Karla',
    load: () => import('@remotion/google-fonts/Karla') as Promise<GoogleFont>,
  },
  {
    family: 'Kaushan Script',
    load: () => import('@remotion/google-fonts/KaushanScript') as Promise<GoogleFont>,
  },
  {
    family: 'Khand',
    load: () => import('@remotion/google-fonts/Khand') as Promise<GoogleFont>,
  },
  {
    family: 'Lato',
    load: () => import('@remotion/google-fonts/Lato') as Promise<GoogleFont>,
  },
  {
    family: 'League Spartan',
    load: () => import('@remotion/google-fonts/LeagueSpartan') as Promise<GoogleFont>,
  },
  {
    family: 'Lexend',
    load: () => import('@remotion/google-fonts/Lexend') as Promise<GoogleFont>,
  },
  {
    family: 'Lexend Deca',
    load: () => import('@remotion/google-fonts/LexendDeca') as Promise<GoogleFont>,
  },
  {
    family: 'Libre Barcode 39',
    load: () => import('@remotion/google-fonts/LibreBarcode39') as Promise<GoogleFont>,
  },
  {
    family: 'Libre Baskerville',
    load: () => import('@remotion/google-fonts/LibreBaskerville') as Promise<GoogleFont>,
  },
  {
    family: 'Libre Caslon Text',
    load: () => import('@remotion/google-fonts/LibreCaslonText') as Promise<GoogleFont>,
  },
  {
    family: 'Libre Franklin',
    load: () => import('@remotion/google-fonts/LibreFranklin') as Promise<GoogleFont>,
  },
  {
    family: 'Lilita One',
    load: () => import('@remotion/google-fonts/LilitaOne') as Promise<GoogleFont>,
  },
  {
    family: 'Lobster',
    load: () => import('@remotion/google-fonts/Lobster') as Promise<GoogleFont>,
  },
  {
    family: 'Lobster Two',
    load: () => import('@remotion/google-fonts/LobsterTwo') as Promise<GoogleFont>,
  },
  {
    family: 'Lora',
    load: () => import('@remotion/google-fonts/Lora') as Promise<GoogleFont>,
  },
  {
    family: 'Luckiest Guy',
    load: () => import('@remotion/google-fonts/LuckiestGuy') as Promise<GoogleFont>,
  },
  {
    family: 'M PLUS 1p',
    load: () => import('@remotion/google-fonts/MPLUS1p') as Promise<GoogleFont>,
  },
  {
    family: 'M PLUS Rounded 1c',
    load: () => import('@remotion/google-fonts/MPLUSRounded1c') as Promise<GoogleFont>,
  },
  {
    family: 'Macondo',
    load: () => import('@remotion/google-fonts/Macondo') as Promise<GoogleFont>,
  },
  {
    family: 'Manrope',
    load: () => import('@remotion/google-fonts/Manrope') as Promise<GoogleFont>,
  },
  {
    family: 'Marcellus',
    load: () => import('@remotion/google-fonts/Marcellus') as Promise<GoogleFont>,
  },
  {
    family: 'Martel',
    load: () => import('@remotion/google-fonts/Martel') as Promise<GoogleFont>,
  },
  {
    family: 'Mate',
    load: () => import('@remotion/google-fonts/Mate') as Promise<GoogleFont>,
  },
  {
    family: 'Mate SC',
    load: () => import('@remotion/google-fonts/MateSC') as Promise<GoogleFont>,
  },
  {
    family: 'Maven Pro',
    load: () => import('@remotion/google-fonts/MavenPro') as Promise<GoogleFont>,
  },
  {
    family: 'Merienda',
    load: () => import('@remotion/google-fonts/Merienda') as Promise<GoogleFont>,
  },
  {
    family: 'Merriweather',
    load: () => import('@remotion/google-fonts/Merriweather') as Promise<GoogleFont>,
  },
  {
    family: 'Merriweather Sans',
    load: () => import('@remotion/google-fonts/MerriweatherSans') as Promise<GoogleFont>,
  },
  {
    family: 'Montserrat',
    load: () => import('@remotion/google-fonts/Montserrat') as Promise<GoogleFont>,
  },
  {
    family: 'Montserrat Alternates',
    load: () => import('@remotion/google-fonts/MontserratAlternates') as Promise<GoogleFont>,
  },
  {
    family: 'Mukta',
    load: () => import('@remotion/google-fonts/Mukta') as Promise<GoogleFont>,
  },
  {
    family: 'Mulish',
    load: () => import('@remotion/google-fonts/Mulish') as Promise<GoogleFont>,
  },
  {
    family: 'Nanum Gothic',
    load: () => import('@remotion/google-fonts/NanumGothic') as Promise<GoogleFont>,
  },
  {
    family: 'Nanum Gothic Coding',
    load: () => import('@remotion/google-fonts/NanumGothicCoding') as Promise<GoogleFont>,
  },
  {
    family: 'Nanum Myeongjo',
    load: () => import('@remotion/google-fonts/NanumMyeongjo') as Promise<GoogleFont>,
  },
  {
    family: 'Neuton',
    load: () => import('@remotion/google-fonts/Neuton') as Promise<GoogleFont>,
  },
  {
    family: 'Noticia Text',
    load: () => import('@remotion/google-fonts/NoticiaText') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Color Emoji',
    load: () => import('@remotion/google-fonts/NotoColorEmoji') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Kufi Arabic',
    load: () => import('@remotion/google-fonts/NotoKufiArabic') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Naskh Arabic',
    load: () => import('@remotion/google-fonts/NotoNaskhArabic') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans',
    load: () => import('@remotion/google-fonts/NotoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans Arabic',
    load: () => import('@remotion/google-fonts/NotoSansArabic') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans Bengali',
    load: () => import('@remotion/google-fonts/NotoSansBengali') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans Display',
    load: () => import('@remotion/google-fonts/NotoSansDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans HK',
    load: () => import('@remotion/google-fonts/NotoSansHK') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans JP',
    load: () => import('@remotion/google-fonts/NotoSansJP') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans KR',
    load: () => import('@remotion/google-fonts/NotoSansKR') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans Mono',
    load: () => import('@remotion/google-fonts/NotoSansMono') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans SC',
    load: () => import('@remotion/google-fonts/NotoSansSC') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans TC',
    load: () => import('@remotion/google-fonts/NotoSansTC') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans Thai',
    load: () => import('@remotion/google-fonts/NotoSansThai') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Serif',
    load: () => import('@remotion/google-fonts/NotoSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Serif JP',
    load: () => import('@remotion/google-fonts/NotoSerifJP') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Serif KR',
    load: () => import('@remotion/google-fonts/NotoSerifKR') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Serif TC',
    load: () => import('@remotion/google-fonts/NotoSerifTC') as Promise<GoogleFont>,
  },
  {
    family: 'Nunito',
    load: () => import('@remotion/google-fonts/Nunito') as Promise<GoogleFont>,
  },
  {
    family: 'Nunito Sans',
    load: () => import('@remotion/google-fonts/NunitoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Old Standard TT',
    load: () => import('@remotion/google-fonts/OldStandardTT') as Promise<GoogleFont>,
  },
  {
    family: 'Oleo Script',
    load: () => import('@remotion/google-fonts/OleoScript') as Promise<GoogleFont>,
  },
  {
    family: 'Open Sans',
    load: () => import('@remotion/google-fonts/OpenSans') as Promise<GoogleFont>,
  },
  {
    family: 'Orbitron',
    load: () => import('@remotion/google-fonts/Orbitron') as Promise<GoogleFont>,
  },
  {
    family: 'Oswald',
    load: () => import('@remotion/google-fonts/Oswald') as Promise<GoogleFont>,
  },
  {
    family: 'Outfit',
    load: () => import('@remotion/google-fonts/Outfit') as Promise<GoogleFont>,
  },
  {
    family: 'Overpass',
    load: () => import('@remotion/google-fonts/Overpass') as Promise<GoogleFont>,
  },
  {
    family: 'Oxygen',
    load: () => import('@remotion/google-fonts/Oxygen') as Promise<GoogleFont>,
  },
  {
    family: 'PT Sans',
    load: () => import('@remotion/google-fonts/PTSans') as Promise<GoogleFont>,
  },
  {
    family: 'PT Sans Caption',
    load: () => import('@remotion/google-fonts/PTSansCaption') as Promise<GoogleFont>,
  },
  {
    family: 'PT Sans Narrow',
    load: () => import('@remotion/google-fonts/PTSansNarrow') as Promise<GoogleFont>,
  },
  {
    family: 'PT Serif',
    load: () => import('@remotion/google-fonts/PTSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Pacifico',
    load: () => import('@remotion/google-fonts/Pacifico') as Promise<GoogleFont>,
  },
  {
    family: 'Passion One',
    load: () => import('@remotion/google-fonts/PassionOne') as Promise<GoogleFont>,
  },
  {
    family: 'Pathway Gothic One',
    load: () => import('@remotion/google-fonts/PathwayGothicOne') as Promise<GoogleFont>,
  },
  {
    family: 'Patua One',
    load: () => import('@remotion/google-fonts/PatuaOne') as Promise<GoogleFont>,
  },
  {
    family: 'Paytone One',
    load: () => import('@remotion/google-fonts/PaytoneOne') as Promise<GoogleFont>,
  },
  {
    family: 'Permanent Marker',
    load: () => import('@remotion/google-fonts/PermanentMarker') as Promise<GoogleFont>,
  },
  {
    family: 'Philosopher',
    load: () => import('@remotion/google-fonts/Philosopher') as Promise<GoogleFont>,
  },
  {
    family: 'Play',
    load: () => import('@remotion/google-fonts/Play') as Promise<GoogleFont>,
  },
  {
    family: 'Playfair Display',
    load: () => import('@remotion/google-fonts/PlayfairDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'Plus Jakarta Sans',
    load: () => import('@remotion/google-fonts/PlusJakartaSans') as Promise<GoogleFont>,
  },
  {
    family: 'Poppins',
    load: () => import('@remotion/google-fonts/Poppins') as Promise<GoogleFont>,
  },
  {
    family: 'Prata',
    load: () => import('@remotion/google-fonts/Prata') as Promise<GoogleFont>,
  },
  {
    family: 'Prompt',
    load: () => import('@remotion/google-fonts/Prompt') as Promise<GoogleFont>,
  },
  {
    family: 'Public Sans',
    load: () => import('@remotion/google-fonts/PublicSans') as Promise<GoogleFont>,
  },
  {
    family: 'Quattrocento',
    load: () => import('@remotion/google-fonts/Quattrocento') as Promise<GoogleFont>,
  },
  {
    family: 'Quattrocento Sans',
    load: () => import('@remotion/google-fonts/QuattrocentoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Questrial',
    load: () => import('@remotion/google-fonts/Questrial') as Promise<GoogleFont>,
  },
  {
    family: 'Quicksand',
    load: () => import('@remotion/google-fonts/Quicksand') as Promise<GoogleFont>,
  },
  {
    family: 'Rajdhani',
    load: () => import('@remotion/google-fonts/Rajdhani') as Promise<GoogleFont>,
  },
  {
    family: 'Raleway',
    load: () => import('@remotion/google-fonts/Raleway') as Promise<GoogleFont>,
  },
  {
    family: 'Readex Pro',
    load: () => import('@remotion/google-fonts/ReadexPro') as Promise<GoogleFont>,
  },
  {
    family: 'Red Hat Display',
    load: () => import('@remotion/google-fonts/RedHatDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'Righteous',
    load: () => import('@remotion/google-fonts/Righteous') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto',
    load: () => import('@remotion/google-fonts/Roboto') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Condensed',
    load: () => import('@remotion/google-fonts/RobotoCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Flex',
    load: () => import('@remotion/google-fonts/RobotoFlex') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Mono',
    load: () => import('@remotion/google-fonts/RobotoMono') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Serif',
    load: () => import('@remotion/google-fonts/RobotoSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Slab',
    load: () => import('@remotion/google-fonts/RobotoSlab') as Promise<GoogleFont>,
  },
  {
    family: 'Rokkitt',
    load: () => import('@remotion/google-fonts/Rokkitt') as Promise<GoogleFont>,
  },
  {
    family: 'Rowdies',
    load: () => import('@remotion/google-fonts/Rowdies') as Promise<GoogleFont>,
  },
  {
    family: 'Rubik',
    load: () => import('@remotion/google-fonts/Rubik') as Promise<GoogleFont>,
  },
  {
    family: 'Rubik Bubbles',
    load: () => import('@remotion/google-fonts/RubikBubbles') as Promise<GoogleFont>,
  },
  {
    family: 'Rubik Mono One',
    load: () => import('@remotion/google-fonts/RubikMonoOne') as Promise<GoogleFont>,
  },
  {
    family: 'Russo One',
    load: () => import('@remotion/google-fonts/RussoOne') as Promise<GoogleFont>,
  },
  {
    family: 'Sacramento',
    load: () => import('@remotion/google-fonts/Sacramento') as Promise<GoogleFont>,
  },
  {
    family: 'Saira',
    load: () => import('@remotion/google-fonts/Saira') as Promise<GoogleFont>,
  },
  {
    family: 'Saira Condensed',
    load: () => import('@remotion/google-fonts/SairaCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Sarabun',
    load: () => import('@remotion/google-fonts/Sarabun') as Promise<GoogleFont>,
  },
  {
    family: 'Satisfy',
    load: () => import('@remotion/google-fonts/Satisfy') as Promise<GoogleFont>,
  },
  {
    family: 'Sawarabi Gothic',
    load: () => import('@remotion/google-fonts/SawarabiGothic') as Promise<GoogleFont>,
  },
  {
    family: 'Sawarabi Mincho',
    load: () => import('@remotion/google-fonts/SawarabiMincho') as Promise<GoogleFont>,
  },
  {
    family: 'Sen',
    load: () => import('@remotion/google-fonts/Sen') as Promise<GoogleFont>,
  },
  {
    family: 'Shadows Into Light',
    load: () => import('@remotion/google-fonts/ShadowsIntoLight') as Promise<GoogleFont>,
  },
  {
    family: 'Signika',
    load: () => import('@remotion/google-fonts/Signika') as Promise<GoogleFont>,
  },
  {
    family: 'Signika Negative',
    load: () => import('@remotion/google-fonts/SignikaNegative') as Promise<GoogleFont>,
  },
  {
    family: 'Silkscreen',
    load: () => import('@remotion/google-fonts/Silkscreen') as Promise<GoogleFont>,
  },
  {
    family: 'Six Caps',
    load: () => import('@remotion/google-fonts/SixCaps') as Promise<GoogleFont>,
  },
  {
    family: 'Slabo 27px',
    load: () => import('@remotion/google-fonts/Slabo27px') as Promise<GoogleFont>,
  },
  {
    family: 'Sora',
    load: () => import('@remotion/google-fonts/Sora') as Promise<GoogleFont>,
  },
  {
    family: 'Source Code Pro',
    load: () => import('@remotion/google-fonts/SourceCodePro') as Promise<GoogleFont>,
  },
  {
    family: 'Source Sans 3',
    load: () => import('@remotion/google-fonts/SourceSans3') as Promise<GoogleFont>,
  },
  {
    family: 'Source Serif 4',
    load: () => import('@remotion/google-fonts/SourceSerif4') as Promise<GoogleFont>,
  },
  {
    family: 'Space Grotesk',
    load: () => import('@remotion/google-fonts/SpaceGrotesk') as Promise<GoogleFont>,
  },
  {
    family: 'Space Mono',
    load: () => import('@remotion/google-fonts/SpaceMono') as Promise<GoogleFont>,
  },
  {
    family: 'Special Elite',
    load: () => import('@remotion/google-fonts/SpecialElite') as Promise<GoogleFont>,
  },
  {
    family: 'Spectral',
    load: () => import('@remotion/google-fonts/Spectral') as Promise<GoogleFont>,
  },
  {
    family: 'Tajawal',
    load: () => import('@remotion/google-fonts/Tajawal') as Promise<GoogleFont>,
  },
  {
    family: 'Tangerine',
    load: () => import('@remotion/google-fonts/Tangerine') as Promise<GoogleFont>,
  },
  {
    family: 'Teko',
    load: () => import('@remotion/google-fonts/Teko') as Promise<GoogleFont>,
  },
  {
    family: 'Tinos',
    load: () => import('@remotion/google-fonts/Tinos') as Promise<GoogleFont>,
  },
  {
    family: 'Titan One',
    load: () => import('@remotion/google-fonts/TitanOne') as Promise<GoogleFont>,
  },
  {
    family: 'Titillium Web',
    load: () => import('@remotion/google-fonts/TitilliumWeb') as Promise<GoogleFont>,
  },
  {
    family: 'Ubuntu',
    load: () => import('@remotion/google-fonts/Ubuntu') as Promise<GoogleFont>,
  },
  {
    family: 'Ubuntu Condensed',
    load: () => import('@remotion/google-fonts/UbuntuCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Ubuntu Mono',
    load: () => import('@remotion/google-fonts/UbuntuMono') as Promise<GoogleFont>,
  },
  {
    family: 'Unbounded',
    load: () => import('@remotion/google-fonts/Unbounded') as Promise<GoogleFont>,
  },
  {
    family: 'Unna',
    load: () => import('@remotion/google-fonts/Unna') as Promise<GoogleFont>,
  },
  {
    family: 'Urbanist',
    load: () => import('@remotion/google-fonts/Urbanist') as Promise<GoogleFont>,
  },
  {
    family: 'Varela Round',
    load: () => import('@remotion/google-fonts/VarelaRound') as Promise<GoogleFont>,
  },
  {
    family: 'Vollkorn',
    load: () => import('@remotion/google-fonts/Vollkorn') as Promise<GoogleFont>,
  },
  {
    family: 'Work Sans',
    load: () => import('@remotion/google-fonts/WorkSans') as Promise<GoogleFont>,
  },
  {
    family: 'Yanone Kaffeesatz',
    load: () => import('@remotion/google-fonts/YanoneKaffeesatz') as Promise<GoogleFont>,
  },
  {
    family: 'Yantramanav',
    load: () => import('@remotion/google-fonts/Yantramanav') as Promise<GoogleFont>,
  },
  {
    family: 'Yellowtail',
    load: () => import('@remotion/google-fonts/Yellowtail') as Promise<GoogleFont>,
  },
  {
    family: 'Yeseva One',
    load: () => import('@remotion/google-fonts/YesevaOne') as Promise<GoogleFont>,
  },
  {
    family: 'Zen Kaku Gothic New',
    load: () => import('@remotion/google-fonts/ZenKakuGothicNew') as Promise<GoogleFont>,
  },
  {
    family: 'Zeyada',
    load: () => import('@remotion/google-fonts/Zeyada') as Promise<GoogleFont>,
  },
  {
    family: 'Zilla Slab',
    load: () => import('@remotion/google-fonts/ZillaSlab') as Promise<GoogleFont>,
  },
];
```

## Show only the 100 most popular Google Fonts

To reduce bundle size, you can limit the selection. Instead of calling `getAvailableFonts()`, create a file with the following contents and use it as the fonts array:

```ts twoslash
import type {GoogleFont} from '@remotion/google-fonts';

export const top100 = [
  {
    family: 'Abel',
    load: () => import('@remotion/google-fonts/Abel') as Promise<GoogleFont>,
  },
  {
    family: 'Anton',
    load: () => import('@remotion/google-fonts/Anton') as Promise<GoogleFont>,
  },
  {
    family: 'Archivo',
    load: () => import('@remotion/google-fonts/Archivo') as Promise<GoogleFont>,
  },
  {
    family: 'Arimo',
    load: () => import('@remotion/google-fonts/Arimo') as Promise<GoogleFont>,
  },
  {
    family: 'Arvo',
    load: () => import('@remotion/google-fonts/Arvo') as Promise<GoogleFont>,
  },
  {
    family: 'Asap',
    load: () => import('@remotion/google-fonts/Asap') as Promise<GoogleFont>,
  },
  {
    family: 'Assistant',
    load: () => import('@remotion/google-fonts/Assistant') as Promise<GoogleFont>,
  },
  {
    family: 'Barlow',
    load: () => import('@remotion/google-fonts/Barlow') as Promise<GoogleFont>,
  },
  {
    family: 'Barlow Condensed',
    load: () => import('@remotion/google-fonts/BarlowCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Barlow Semi Condensed',
    load: () => import('@remotion/google-fonts/BarlowSemiCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Bebas Neue',
    load: () => import('@remotion/google-fonts/BebasNeue') as Promise<GoogleFont>,
  },
  {
    family: 'Bitter',
    load: () => import('@remotion/google-fonts/Bitter') as Promise<GoogleFont>,
  },
  {
    family: 'Cabin',
    load: () => import('@remotion/google-fonts/Cabin') as Promise<GoogleFont>,
  },
  {
    family: 'Cairo',
    load: () => import('@remotion/google-fonts/Cairo') as Promise<GoogleFont>,
  },
  {
    family: 'Caveat',
    load: () => import('@remotion/google-fonts/Caveat') as Promise<GoogleFont>,
  },
  {
    family: 'Chakra Petch',
    load: () => import('@remotion/google-fonts/ChakraPetch') as Promise<GoogleFont>,
  },
  {
    family: 'Comfortaa',
    load: () => import('@remotion/google-fonts/Comfortaa') as Promise<GoogleFont>,
  },
  {
    family: 'Cormorant Garamond',
    load: () => import('@remotion/google-fonts/CormorantGaramond') as Promise<GoogleFont>,
  },
  {
    family: 'Crimson Text',
    load: () => import('@remotion/google-fonts/CrimsonText') as Promise<GoogleFont>,
  },
  {
    family: 'DM Sans',
    load: () => import('@remotion/google-fonts/DMSans') as Promise<GoogleFont>,
  },
  {
    family: 'Dancing Script',
    load: () => import('@remotion/google-fonts/DancingScript') as Promise<GoogleFont>,
  },
  {
    family: 'Dosis',
    load: () => import('@remotion/google-fonts/Dosis') as Promise<GoogleFont>,
  },
  {
    family: 'EB Garamond',
    load: () => import('@remotion/google-fonts/EBGaramond') as Promise<GoogleFont>,
  },
  {
    family: 'Exo 2',
    load: () => import('@remotion/google-fonts/Exo2') as Promise<GoogleFont>,
  },
  {
    family: 'Figtree',
    load: () => import('@remotion/google-fonts/Figtree') as Promise<GoogleFont>,
  },
  {
    family: 'Fira Sans',
    load: () => import('@remotion/google-fonts/FiraSans') as Promise<GoogleFont>,
  },
  {
    family: 'Fira Sans Condensed',
    load: () => import('@remotion/google-fonts/FiraSansCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Fjalla One',
    load: () => import('@remotion/google-fonts/FjallaOne') as Promise<GoogleFont>,
  },
  {
    family: 'Heebo',
    load: () => import('@remotion/google-fonts/Heebo') as Promise<GoogleFont>,
  },
  {
    family: 'Hind',
    load: () => import('@remotion/google-fonts/Hind') as Promise<GoogleFont>,
  },
  {
    family: 'Hind Siliguri',
    load: () => import('@remotion/google-fonts/HindSiliguri') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Mono',
    load: () => import('@remotion/google-fonts/IBMPlexMono') as Promise<GoogleFont>,
  },
  {
    family: 'IBM Plex Sans',
    load: () => import('@remotion/google-fonts/IBMPlexSans') as Promise<GoogleFont>,
  },
  {
    family: 'Inconsolata',
    load: () => import('@remotion/google-fonts/Inconsolata') as Promise<GoogleFont>,
  },
  {
    family: 'Inter',
    load: () => import('@remotion/google-fonts/Inter') as Promise<GoogleFont>,
  },
  {
    family: 'Josefin Sans',
    load: () => import('@remotion/google-fonts/JosefinSans') as Promise<GoogleFont>,
  },
  {
    family: 'Jost',
    load: () => import('@remotion/google-fonts/Jost') as Promise<GoogleFont>,
  },
  {
    family: 'Kanit',
    load: () => import('@remotion/google-fonts/Kanit') as Promise<GoogleFont>,
  },
  {
    family: 'Karla',
    load: () => import('@remotion/google-fonts/Karla') as Promise<GoogleFont>,
  },
  {
    family: 'Lato',
    load: () => import('@remotion/google-fonts/Lato') as Promise<GoogleFont>,
  },
  {
    family: 'Lexend',
    load: () => import('@remotion/google-fonts/Lexend') as Promise<GoogleFont>,
  },
  {
    family: 'Libre Baskerville',
    load: () => import('@remotion/google-fonts/LibreBaskerville') as Promise<GoogleFont>,
  },
  {
    family: 'Libre Franklin',
    load: () => import('@remotion/google-fonts/LibreFranklin') as Promise<GoogleFont>,
  },
  {
    family: 'Lobster',
    load: () => import('@remotion/google-fonts/Lobster') as Promise<GoogleFont>,
  },
  {
    family: 'Lora',
    load: () => import('@remotion/google-fonts/Lora') as Promise<GoogleFont>,
  },
  {
    family: 'M PLUS Rounded 1c',
    load: () => import('@remotion/google-fonts/MPLUSRounded1c') as Promise<GoogleFont>,
  },
  {
    family: 'Manrope',
    load: () => import('@remotion/google-fonts/Manrope') as Promise<GoogleFont>,
  },
  {
    family: 'Maven Pro',
    load: () => import('@remotion/google-fonts/MavenPro') as Promise<GoogleFont>,
  },
  {
    family: 'Merriweather',
    load: () => import('@remotion/google-fonts/Merriweather') as Promise<GoogleFont>,
  },
  {
    family: 'Montserrat',
    load: () => import('@remotion/google-fonts/Montserrat') as Promise<GoogleFont>,
  },
  {
    family: 'Mukta',
    load: () => import('@remotion/google-fonts/Mukta') as Promise<GoogleFont>,
  },
  {
    family: 'Mulish',
    load: () => import('@remotion/google-fonts/Mulish') as Promise<GoogleFont>,
  },
  {
    family: 'Nanum Gothic',
    load: () => import('@remotion/google-fonts/NanumGothic') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Color Emoji',
    load: () => import('@remotion/google-fonts/NotoColorEmoji') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans',
    load: () => import('@remotion/google-fonts/NotoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans Arabic',
    load: () => import('@remotion/google-fonts/NotoSansArabic') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans HK',
    load: () => import('@remotion/google-fonts/NotoSansHK') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans JP',
    load: () => import('@remotion/google-fonts/NotoSansJP') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans KR',
    load: () => import('@remotion/google-fonts/NotoSansKR') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans SC',
    load: () => import('@remotion/google-fonts/NotoSansSC') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans TC',
    load: () => import('@remotion/google-fonts/NotoSansTC') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Serif',
    load: () => import('@remotion/google-fonts/NotoSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Serif JP',
    load: () => import('@remotion/google-fonts/NotoSerifJP') as Promise<GoogleFont>,
  },
  {
    family: 'Nunito',
    load: () => import('@remotion/google-fonts/Nunito') as Promise<GoogleFont>,
  },
  {
    family: 'Nunito Sans',
    load: () => import('@remotion/google-fonts/NunitoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Open Sans',
    load: () => import('@remotion/google-fonts/OpenSans') as Promise<GoogleFont>,
  },
  {
    family: 'Oswald',
    load: () => import('@remotion/google-fonts/Oswald') as Promise<GoogleFont>,
  },
  {
    family: 'Outfit',
    load: () => import('@remotion/google-fonts/Outfit') as Promise<GoogleFont>,
  },
  {
    family: 'Overpass',
    load: () => import('@remotion/google-fonts/Overpass') as Promise<GoogleFont>,
  },
  {
    family: 'Oxygen',
    load: () => import('@remotion/google-fonts/Oxygen') as Promise<GoogleFont>,
  },
  {
    family: 'PT Sans',
    load: () => import('@remotion/google-fonts/PTSans') as Promise<GoogleFont>,
  },
  {
    family: 'PT Sans Narrow',
    load: () => import('@remotion/google-fonts/PTSansNarrow') as Promise<GoogleFont>,
  },
  {
    family: 'PT Serif',
    load: () => import('@remotion/google-fonts/PTSerif') as Promise<GoogleFont>,
  },
  {
    family: 'Pacifico',
    load: () => import('@remotion/google-fonts/Pacifico') as Promise<GoogleFont>,
  },
  {
    family: 'Play',
    load: () => import('@remotion/google-fonts/Play') as Promise<GoogleFont>,
  },
  {
    family: 'Playfair Display',
    load: () => import('@remotion/google-fonts/PlayfairDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'Poppins',
    load: () => import('@remotion/google-fonts/Poppins') as Promise<GoogleFont>,
  },
  {
    family: 'Prompt',
    load: () => import('@remotion/google-fonts/Prompt') as Promise<GoogleFont>,
  },
  {
    family: 'Public Sans',
    load: () => import('@remotion/google-fonts/PublicSans') as Promise<GoogleFont>,
  },
  {
    family: 'Quicksand',
    load: () => import('@remotion/google-fonts/Quicksand') as Promise<GoogleFont>,
  },
  {
    family: 'Rajdhani',
    load: () => import('@remotion/google-fonts/Rajdhani') as Promise<GoogleFont>,
  },
  {
    family: 'Raleway',
    load: () => import('@remotion/google-fonts/Raleway') as Promise<GoogleFont>,
  },
  {
    family: 'Red Hat Display',
    load: () => import('@remotion/google-fonts/RedHatDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto',
    load: () => import('@remotion/google-fonts/Roboto') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Condensed',
    load: () => import('@remotion/google-fonts/RobotoCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Mono',
    load: () => import('@remotion/google-fonts/RobotoMono') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Slab',
    load: () => import('@remotion/google-fonts/RobotoSlab') as Promise<GoogleFont>,
  },
  {
    family: 'Rubik',
    load: () => import('@remotion/google-fonts/Rubik') as Promise<GoogleFont>,
  },
  {
    family: 'Shadows Into Light',
    load: () => import('@remotion/google-fonts/ShadowsIntoLight') as Promise<GoogleFont>,
  },
  {
    family: 'Signika Negative',
    load: () => import('@remotion/google-fonts/SignikaNegative') as Promise<GoogleFont>,
  },
  {
    family: 'Slabo 27px',
    load: () => import('@remotion/google-fonts/Slabo27px') as Promise<GoogleFont>,
  },
  {
    family: 'Source Code Pro',
    load: () => import('@remotion/google-fonts/SourceCodePro') as Promise<GoogleFont>,
  },
  {
    family: 'Source Sans 3',
    load: () => import('@remotion/google-fonts/SourceSans3') as Promise<GoogleFont>,
  },
  {
    family: 'Space Grotesk',
    load: () => import('@remotion/google-fonts/SpaceGrotesk') as Promise<GoogleFont>,
  },
  {
    family: 'Teko',
    load: () => import('@remotion/google-fonts/Teko') as Promise<GoogleFont>,
  },
  {
    family: 'Titillium Web',
    load: () => import('@remotion/google-fonts/TitilliumWeb') as Promise<GoogleFont>,
  },
  {
    family: 'Ubuntu',
    load: () => import('@remotion/google-fonts/Ubuntu') as Promise<GoogleFont>,
  },
  {
    family: 'Varela Round',
    load: () => import('@remotion/google-fonts/VarelaRound') as Promise<GoogleFont>,
  },
  {
    family: 'Work Sans',
    load: () => import('@remotion/google-fonts/WorkSans') as Promise<GoogleFont>,
  },
  {
    family: 'Zilla Slab',
    load: () => import('@remotion/google-fonts/ZillaSlab') as Promise<GoogleFont>,
  },
];
```

## Show only the 25 most popular Google Fonts

To reduce bundle size, you can limit the selection. Instead of calling `getAvailableFonts()`, create a file with the following contents and use it as the fonts array:

```ts twoslash
import type {GoogleFont} from '@remotion/google-fonts';

export const top25 = [
  {
    family: 'Inter',
    load: () => import('@remotion/google-fonts/Inter') as Promise<GoogleFont>,
  },
  {
    family: 'Kanit',
    load: () => import('@remotion/google-fonts/Kanit') as Promise<GoogleFont>,
  },
  {
    family: 'Lato',
    load: () => import('@remotion/google-fonts/Lato') as Promise<GoogleFont>,
  },
  {
    family: 'Lora',
    load: () => import('@remotion/google-fonts/Lora') as Promise<GoogleFont>,
  },
  {
    family: 'Merriweather',
    load: () => import('@remotion/google-fonts/Merriweather') as Promise<GoogleFont>,
  },
  {
    family: 'Montserrat',
    load: () => import('@remotion/google-fonts/Montserrat') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans',
    load: () => import('@remotion/google-fonts/NotoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans JP',
    load: () => import('@remotion/google-fonts/NotoSansJP') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans KR',
    load: () => import('@remotion/google-fonts/NotoSansKR') as Promise<GoogleFont>,
  },
  {
    family: 'Noto Sans TC',
    load: () => import('@remotion/google-fonts/NotoSansTC') as Promise<GoogleFont>,
  },
  {
    family: 'Nunito',
    load: () => import('@remotion/google-fonts/Nunito') as Promise<GoogleFont>,
  },
  {
    family: 'Nunito Sans',
    load: () => import('@remotion/google-fonts/NunitoSans') as Promise<GoogleFont>,
  },
  {
    family: 'Open Sans',
    load: () => import('@remotion/google-fonts/OpenSans') as Promise<GoogleFont>,
  },
  {
    family: 'Oswald',
    load: () => import('@remotion/google-fonts/Oswald') as Promise<GoogleFont>,
  },
  {
    family: 'PT Sans',
    load: () => import('@remotion/google-fonts/PTSans') as Promise<GoogleFont>,
  },
  {
    family: 'Playfair Display',
    load: () => import('@remotion/google-fonts/PlayfairDisplay') as Promise<GoogleFont>,
  },
  {
    family: 'Poppins',
    load: () => import('@remotion/google-fonts/Poppins') as Promise<GoogleFont>,
  },
  {
    family: 'Raleway',
    load: () => import('@remotion/google-fonts/Raleway') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto',
    load: () => import('@remotion/google-fonts/Roboto') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Condensed',
    load: () => import('@remotion/google-fonts/RobotoCondensed') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Mono',
    load: () => import('@remotion/google-fonts/RobotoMono') as Promise<GoogleFont>,
  },
  {
    family: 'Roboto Slab',
    load: () => import('@remotion/google-fonts/RobotoSlab') as Promise<GoogleFont>,
  },
  {
    family: 'Rubik',
    load: () => import('@remotion/google-fonts/Rubik') as Promise<GoogleFont>,
  },
  {
    family: 'Ubuntu',
    load: () => import('@remotion/google-fonts/Ubuntu') as Promise<GoogleFont>,
  },
  {
    family: 'Work Sans',
    load: () => import('@remotion/google-fonts/WorkSans') as Promise<GoogleFont>,
  },
];
```

## Loading fonts from the server

You can reduce the client-side bundle even more by loading a Google Font just from it's metadata.

You can get the metadata in a serializable JSON format using [`getInfo()`](/docs/google-fonts/get-info), and load a font using [`loadFontFromInfo()`](/docs/google-fonts/load-font-from-info).
